<template>
  <div class="addAddress">
    <Header :isLeft="true" :title="title"></Header>
    <div class="viewbody">
      <div class="content">
        <FormBlock
          label="联系人"
          placeholder="姓名"
          :tags="sexes"
          :sex="addressInfo.sex"
          @checksex="checkSex"
          v-model="addressInfo.name"
        />
        <FormBlock
          v-model="addressInfo.phone"
          label="电话"
          placeholder="手机号码"
        />
        <FormBlock
          v-model="addressInfo.address"
          @click="showSearch = true"
          label="地址"
          placeholder="小区/写字楼/学校等"
          icon="angle-right"
        />
        <FormBlock
          v-model="addressInfo.bottom"
          label="门牌号"
          placeholder="10号楼5单元404"
          icon="edit"
          textarea="textarea"
        />
        <div class="formblock">
          <div class="label-wrap">标签</div>
          <TabTag
            :tags="tags"
            :selectTag="addressInfo.tag"
            @checktag="checktag"
          />
        </div>
      </div>
      <!-- 确定按钮 -->
      <div class="form-button-wrap">
        <button @click="handleSave" class="form-button">确定</button>
      </div>
    </div>
    <AddressSearch
      @close="showSearch = false"
      :showSearch="showSearch"
      :addressInfo="addressInfo"
    ></AddressSearch>
  </div>
</template>
<script>
import Header from "../../components/Header";
import FormBlock from "../../components/Orders/FormBlock";
import TabTag from "../../components/Orders/TabTag";
import AddressSearch from "../../components/Orders/AddressSearch";
import { Toast } from "mint-ui";
export default {
  name: "AddAddress",
  data() {
    return {
      title: "添加地址",
      tags: ["家", "学校", "公司"],
      sexes: ["先生", "女士"],
      addressInfo: {
        tag: "",
        sex: "",
        address: "",
        phone: "",
        name: "",
        bottom: "",
        user_id: JSON.parse(localStorage.getItem("ele_login")).mobile,
      },
      newaddress: {},
      showSearch: false,
      index: 0,
    };
  },
  beforeRouteEnter(to, from, next) {
    // ...
    next((vm) => {
      vm.title = to.params.title;
      vm.addressInfo = to.params.addressInfo;
      vm.index = to.params.index;
    });
  },
  components: {
    Header,
    FormBlock,
    TabTag,
    AddressSearch,
  },
  methods: {
    checktag(item) {
      this.addressInfo.tag = item;
    },
    checkSex(item) {
      this.addressInfo.sex = item;
    },
    handleSave() {
      if (!this.addressInfo.name) {
        this.showMsg("请输入联系人");
        return;
      } else if (!this.addressInfo.phone) {
        this.showMsg("请输入手机号");
        return;
      } else if (!this.addressInfo.address) {
        this.showMsg("请选择收货地址");
        return;
      }
      if (this.title == "编辑地址") {
        this.editAddress();
      } else {
        this.addAddress();
      }
    },
    showMsg(msg) {
      Toast({
        message: msg,
        position: "bottom",
        duration: 2000,
      });
    },
    addAddress() {
      if (
        !localStorage.getItem(
          "myAddress" + JSON.parse(localStorage.ele_login).mobile
        )
      ) {
        localStorage.setItem(
          "myAddress" + JSON.parse(localStorage.ele_login).mobile,
          JSON.stringify(this.addressInfo)
        );
      } else {
        let addressInfo = localStorage.getItem(
          "myAddress" + JSON.parse(localStorage.ele_login).mobile
        );
        let addressList;
        addressList = addressInfo + "|" + JSON.stringify(this.addressInfo);
        localStorage.setItem(
          "myAddress" + JSON.parse(localStorage.ele_login).mobile,
          addressList
        );
      }
      if (!this.$store.getters.userInfo) {
        this.$store.dispatch("setUserInfo", this.addressInfo);
      }

      this.$router.push("myAddress");
    },
    editAddress() {
      let AddressList = localStorage.getItem(
        "myAddress" + JSON.parse(localStorage.ele_login).mobile
      );
      let addressList = AddressList.split("|");
      let newaddress = JSON.parse(addressList[this.index]);
      newaddress.tag = this.addressInfo.tag;
      newaddress.phone = this.addressInfo.phone;
      newaddress.name = this.addressInfo.name;
      newaddress.sex = this.addressInfo.sex;
      newaddress.user_id = this.addressInfo.user_id;
      newaddress.bottom = this.addressInfo.bottom;
      addressList[this.index] = JSON.stringify(newaddress);
      localStorage.setItem(
        "myAddress" + JSON.parse(localStorage.ele_login).mobile,
        addressList.join("|")
      );
      this.$router.push("myAddress");
    },
  },
};
</script>
<style scoped>
.addAddress {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding-top: 45px;
}
.viewbody {
  width: 100%;
  height: 100%;
  overflow: auto;
  box-sizing: border-box;
  background-color: #f5f5f5;
}

.content {
  padding-left: 4vw;
  background: #fff;
  font-size: 0.94rem;
}

.formblock {
  background-color: #fff;
  border-bottom: 1px solid #eee;
  display: flex;
}
.formblock .label-wrap {
  flex-basis: 17.333333vw;
  padding: 3.733333vw 0;
  line-height: 4.8vw;
  color: #333;
  font-weight: 700;
}

/* 确定按钮 */
.form-button-wrap {
  padding: 5.333333vw 4vw;
  display: flex;
}
.form-button-wrap .form-button {
  background: #00d762;
  text-align: center;
  border-radius: 0.533333vw;
  flex: 1;
  font-size: 1.1rem;
  line-height: 5.066667vw;
  color: #fff;
  padding: 3.333333vw 0;
  border: none;
  font-weight: 500;
}
</style>